{{- $icons_list := resources.Get "icons-list.json" | transform.Unmarshal }}
{{- range $icons_list }}
{{- $svgLocalPath := printf "/icons/%s.svg" .icon_code }}
{{- $svgPubPath := path.Join "/assets/" $svgLocalPath }}
{{- $fontSnippet := printf `<i class="qi-%s"></i>` .icon_name -}}
{{- $fontSnippetByCode := printf `<i class="qi-%s"></i>` .icon_code -}}
{{- $IconCodeOnly := .icon_code | replaceRE "-fill" "" }}

<div class="icon-details-{{.icon_code}} mb-12 ">
    <div class="icon-name flex justify-between items-center mb-5">
        <h2 id={{.icon_name | anchorize }} class="text-3xl my-0">{{.icon_name | humanize }}<a href="#{{.icon_name | anchorize }}" class="ml-1 text-gray-200 hover:text-linkblue" title="{{ T "permalink"}}">#</a></h2>
        <a class="block text-sm" href="#top">&#8679; top</a>
    </div>
    <p>{{ T "icon_code" }}: <code>{{ $IconCodeOnly }}</code></p>
    <div class="text-[150px] p-5 bg-gray-50 bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-[#ddd] from-[1px] to-transparent to-[1px] bg-[length:1rem_1rem] text-center">
        <i class="qi qi-{{.icon_code}}"></i>
    </div>
    <div class="flex-grid">
        <div class="w-full md:w-1/3 px-3">
            <h4>{{ T "download" }}</h4>
            <p>{{ T "dl_desc" }}</p>
            <a href="{{$svgPubPath}}" class="inline-block bg-linkblue rounded-xl text-gray-100 py-3 px-5 hover:text-white hover:no-underline">{{ T "download" }} SVG</a>
        </div>
        <div class="w-full md:w-1/3 px-3">
            <h4>{{ T "iconfont" }}</h4>
            <p>{{ T "if_desc" | markdownify }}</p>
            {{/*  {{ highlight $fontSnippet "html" "" }}  */}}
            {{ highlight $fontSnippetByCode "html" "" }}
        </div>
        <div class="w-full md:w-1/3 px-3">
            <h4>HTML</h4>
            <p>{{ T "html_desc" }}</p>
            {{ $htmlSvg := readFile $svgLocalPath | chomp | safeHTML }}
            {{ highlight $htmlSvg "html" "" }}
        </div>
    </div>
</div>
{{- end }}

